<template>
  <div class="ecommerce">
    <el-col>
      <CardList :staticData="staticData" :key="staticKey"></CardList>
    </el-col>
    <div class="art-custom-card card-list">
      <div class="card-header">
        <div class="title">用户概况及趋势</div>
      </div>
      <carAnalysis :overviewStatic="userList" v-if="userList.length"></carAnalysis>
    </div>
    <div class="art-custom-card">
      <div class="card-header">
        <div class="title">用户概况</div>
      </div>
      <dataInfo></dataInfo>
    </div>
  </div>
</template>

<script setup lang="ts">
import dataInfo from './widget/dataInfo.vue'
import carAnalysis from './widget/carAnalysis.vue'
import CardList from './widget/CardList.vue'
import { getUserBasis, getUserStatic } from '@/api/questionbank'

const staticKey = ref(0)
const staticData = ref({})
const getBasicInfo = async () => {
  const res = await getUserBasis()
  if (res.code === '00000') {
    staticData.value = res.data
    staticKey.value = new Date().getDate()
  }
}

const userList = ref([])
const getUserData = async () => {
  const res = await getUserStatic({ days: 30 })
  if (res.code === '00000') {
    userList.value = res.data
  }
}
onMounted(() => {
  getBasicInfo();
  getUserData()
})
</script>

<style lang="scss" scoped>
@use './style';

.card-list {
  margin-bottom: 20px;
}
</style>
